<template>
    <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onMounted, watch } from 'vue';
import request from '@/request';

import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
// import 'tinymce/skins/content/default/content.css';

import 'tinymce/themes/silver';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default';
import 'tinymce/models/dom';
import 'tinymce/icons/default/icons';
// import 'tinymce/plugins/image';
import 'tinymce/plugins/preview';
// import 'tinymce/plugins/media';
// import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/code';
// import 'tinymce/plugins/fullscreen';
// import '/public/tinymce/image/plugin.js';
import '/public/tinymce/axupimgs/plugin.js';

const emits = defineEmits(['getContent']);
//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
    value: {
        type: String,
        default: () => {
            return '';
        }
    },
    baseUrl: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    plugins: {
        type: [String, Array],
        default: 'preview lists axupimgs'
    },
    toolbar: {
        type: [String, Array],
        default:
            'preview codesample bold italic underline alignleft aligncenter alignright alignjustify | axupimgs | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat '
    }
});

/** 用于接收外部传递进来的富文本*/
const myValue = ref(props.value);
const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''));

const init = reactive({
    selector: '#' + tinymceId.value,
    language_url: '/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/tinymce/skins/ui/oxide',
    height: 400,
    branding: false,
    promotion: false,
    image_dimensions: false,
    plugins: props.plugins,
    toolbar: props.toolbar,
    content_style: 'p { line-height: 1 }',
    font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
    fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px',
    // paste_convert_word_fake_lists: false,
    paste_webkit_styles: 'all',
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false,
    file_picker_types: 'file axupimgs',
    content_css: '/tinymce/skins/content/default/content.css',
    /** 图片上传*/
    images_upload_handler: (blobInfo, succFun, failFun) =>
        new Promise((resolve, reject) => {
            let imgType = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!imgType.includes(blobInfo.blob().type)) {
                reject({ message: '上传图片只能是jpg、png、jpeg格式', remove: true });
                failFun('上传图片只能是jpg、png、jpeg格式');
                return;
            } else if (blobInfo.blob().size / 1024 / 1024 > 10) {
                reject({ message: '上传失败，图片大小请控制在 10M 以内', remove: true });
                failFun('上传失败，图片大小请控制在 10M 以内');
                return;
            } else {
                let params = new FormData();
                params.append('file', blobInfo.blob());
                request('fileUploadServ', params)
                    .then(res => {
                        resolve(res.data.url);
                        succFun(res.data.url);
                    })
                    .catch(error => {
                        reject();
                        failFun();
                    });
            }
        }),
    /** 文件上传*/
    file_picker_callback: (callback, value, meta) => {
        if (meta.filetype == 'file') {
            callback('mypage.html', { text: 'My text' });
        }

        if (meta.filetype == 'image') {
            callback('myimage.jpg', { alt: 'My alt text' });
        }

        if (meta.filetype == 'media') {
            callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
        }
    }
});

/** 监听外部传递进来的的数据变化*/
watch(
    () => props.value,
    () => {
        myValue.value = props.value;
        emits('getContent', myValue.value);
    }
);
/** 监听富文本中的数据变化*/
watch(
    () => myValue.value,
    () => {
        emits('getContent', myValue.value);
    }
);
/** 在onMounted中初始化编辑器*/
onMounted(() => {
    tinymce.init({});
});
</script>
